<template>
	<view class="clothing-detail">
		<view v-if="logining" class="loading-container">
			<u-loading-icon></u-loading-icon>
			<text>数据加载中...</text>
		</view>
		<!-- 加载完成状态 -->
		<view v-else>
			<!-- 商品图片轮播 -->
			<u-swiper :list="goodsInfo.images" keyName="url" height="375" :autoplay="false" indicator
				indicatorMode="dot"></u-swiper>

			<!-- 商品基本信息 -->
			<view class="goods-info">
				<view class="price-section">
					<text class="current-price">¥{{goodsInfo.price}}</text>
					<text class="original-price" v-if="goodsInfo.originalPrice">¥{{goodsInfo.originalPrice}}</text>
					<text class="discount" v-if="goodsInfo.discount">已省¥{{goodsInfo.discount}}</text>
				</view>
				<view class="title">{{goodsInfo.title}}</view>
				<view class="tags">
					<text v-for="tag in goodsInfo.tags" :key="tag" class="tag">{{tag}}</text>
				</view>
			</view>

			<!-- 选择商品 -->
			<view class="spec-section">
				<view class="spec-row" @click="showgoodsPopup">
					<text class="spec-label">商品</text>
					<text class="spec-value">{{selectdes==''?'请选择商品':selectdes}}</text>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
				<view class="spec-row">
					<text class="spec-label">服务</text>
					<text class="service">7天无理由退换 · 运费险</text>
				</view>
			</view>
			<!-- 商品评论 -->
			<product-comment></product-comment>
			<!-- 商品详情展示 -->
			<view class="detail-section">
				<view class="section-title">商品详情</view>
				<u-parse :content="goodsInfo.detail"></u-parse>
			</view>

			<!-- 商品介绍 -->
			<view class="size-guide">
				<view class="section-title">商品介绍</view>
				<image v-for="(imgs, imgIndex) in goodsInfo.imgChart" :src="imgs.img" mode="widthFix" :key="imgs.id">
				</image>
			</view>

			<!-- 底部操作栏 -->
			<view class="footer">
				<view class="footer-left">
					<view class="icon-btn" @click="goToHome">
						<u-icon name="home" size="22"></u-icon>
						<text>首页</text>
					</view>
					<view class="icon-btn" @click="goToCart">
						<u-icon name="shopping-cart" size="22"></u-icon>
						<text>购物车</text>
					</view>
					<view class="icon-btn">
						<u-icon name="star" size="22"></u-icon>
						<text>收藏</text>
					</view>
				</view>
				<view class="footer-right">
					<u-button type="warning" shape="circle" customStyle="width:200rpx;height:70rpx;"
						@click="addToCart">加入购物车</u-button>
					<u-button type="error" shape="circle" customStyle="width:180rpx;height:70rpx;margin-left:20rpx;"
						@click="buyNow">立即购买</u-button>
				</view>
			</view>
			<!-- 弹窗选择商品 -->
			<u-popup :show="goodsPopupVisible" mode="bottom" round="16" @close="goodsPopupVisible = false" closeable>
				<!-- 商品规格选择组件 -->
				<Specselector :receivedata="selectgoodsinfo" @selectdata="selectgoods" @isshowform="showgoodsform">
				</Specselector>
			</u-popup>
		</view>
	</view>

</template>
<script>
	import {
		httpsend
	} from '@/api/api';
	import Specselector from '@/components/spec-selector';
	import ProductComment from '@/components/product-comment';
	export default {
		components: {
			Specselector,
			ProductComment
		},
		data() {
			return {
				logining: false,
				goodsId: null,
				goodsPopupVisible: false,
				selectedSize: '',
				selectedColor: '',
				selectdes: '',
				goodsInfo: {},
				selectgoodsinfo: {},
				buygoodsinfo: [],
			}
		},
		onLoad(options) {
			this.goodsId = options.id;
			this.loadGoodsDetail();
		},
		methods: {
			selectgoods(e) {
				this.buygoodsinfo = e;
				let items = this.selectgoodsinfo['typeOptions'].find(item => item.id == this.buygoodsinfo.selecttype);
				console.log('buygoodsinfo', this.buygoodsinfo)
				this.selectdes = '已选:' +
					items.name + ',' +
					items.sizeOptions.find(item => item.id == this.buygoodsinfo.selectedSize)['value'] +
					',数量' + this.buygoodsinfo.buycount;
				console.log('now', this.selectdes)
			},
			showgoodsform(e) {
				this.goodsPopupVisible = e.isvisible;
			},
			//加载商品信息  
			async loadGoodsDetail() {
				// 模拟API请求
				try {
					this.logining = true;
					const res = await httpsend('getgoodsInfo');
					if (res?.code === 1) {
						//商品所有信息
						this.goodsInfo = res.data;
						//选择商品信息
						this.selectgoodsinfo = this.goodsInfo;
						console.log('this.goodsInfo', this.goodsInfo);
					} else {
						this.$api.msg(res.msg);
					}
					this.logining = false;
				} catch (err) {
					this.logining = false;
					console.log('err', err);
				}
			},
			//显示选择商品
			showgoodsPopup() {
				this.goodsPopupVisible = true;
			},
			//添加到购物车
			async addToCart() {
				if (!this.selectedSize || !this.selectedColor) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					});
					return;
				}
				try {
					uni.showLoading({
						title: '添加中...'
					});
					const res = await httpsend('addtocart');
					if (res?.code === 1) {

					}
					uni.hideLoading();
					this.$api.msg(res.msg);
				} catch (err) {
					uni.hideLoading();
					console.log('错误', err);
				}
			},
			//立即购买
			async buyNow() {
				if (this.buygoodsinfo.length == 0) {
					this.goodsPopupVisible = true;
					return;
				}
				try {
					const param = {
						id: this.goodsInfo.id,
						size: this.buygoodsinfo.selectedSize,
						type: this.buygoodsinfo.selecttype,
						quantity: this.buygoodsinfo.buycount
					};
					//立即购买创建一个待支付订单
					const res = await httpsend('buynow', JSON.stringify(param));
					if (res?.code === 1) {
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/order/payment?id=' + res.id
						});
					} else {
						this.$api.msg(res.msg);
					}
				} catch (err) {
					console.log('err', err);
				}
			},
			//前往首页
			goToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			//前往购物车
			goToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 500rpx;
	}

	.clothing-detail {
		padding-bottom: 100rpx;
		background-color: #ffffff;
	}

	.goods-info {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.price-section {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			.current-price {
				font-size: 36rpx;
				color: #e74c3c;
				font-weight: bold;
				margin-right: 16rpx;
			}

			.original-price {
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
				margin-right: 16rpx;
			}

			.discount {
				font-size: 22rpx;
				color: #fff;
				background-color: #e74c3c;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;
			}
		}

		.title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 12rpx;
		}

		.tags {
			display: flex;
			flex-wrap: wrap;

			.tag {
				font-size: 22rpx;
				color: #e74c3c;
				background-color: #fef0f0;
				padding: 4rpx 12rpx;
				border-radius: 4rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.spec-section {
		background-color: #fff;
		padding: 0 20rpx;
		margin-bottom: 20rpx;

		.spec-row {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.spec-label {
				width: 100rpx;
				font-size: 26rpx;
				color: #999;
			}

			.spec-value {
				flex: 1;
				font-size: 26rpx;
				color: #333;
			}

			.service {
				flex: 1;
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.detail-section,
	.size-guide {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}

		::v-deep img {
			max-width: 100% !important;
		}
	}

	.size-chart {
		width: 100%;
		border-radius: 8rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.footer-left {
			flex: 1;
			display: flex;

			.icon-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				position: relative;

				text {
					font-size: 20rpx;
					color: #666;
					margin-top: 4rpx;
				}
			}
		}

		.footer-right {
			flex: 2;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>